<template>
	<div class="wf-form-detail-container layout-padding">
    <el-row :gutter="15">
        <el-col :span="6">          
          <div class="left-container">
            <el-card shadow="hover" class="layout-padding-auto mb15">
              <template #header>
                <span>输入型组件</span>
              </template>
              <div class="input-component-container">
                <draggable
                    :list="state.inputComponents"
                    :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
                    :clone="cloneComponent"
                    draggable=".draggable-item"
                    :sort="false"
                    @end="onEnd"
                  >
                    <template #item="{ element, index }">
                      <el-button class="draggable-item" size="default" plain @click="addComponent(element, index)">{{ element.label }}</el-button>
                    </template>
                </draggable>
              </div>
            </el-card>
            <el-card shadow="hover" class="layout-padding-auto mb15">
              <template #header>
                <span>选择型组件</span>
              </template>
              <div class="select-component-container">
                <draggable
                    :list="state.selectComponents"
                    :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
                    :clone="cloneComponent"
                    draggable=".draggable-item"
                    :sort="false"
                    @end="onEnd"
                  >
                    <template #item="{ element, index }">
                      <el-button class="draggable-item" size="default" plain @click="addComponent(element, index)">{{ element.label }}</el-button>
                    </template>
                </draggable>
              </div>
            </el-card>
            <el-card shadow="hover" class="layout-padding-auto">
              <template #header>
                <span>引用型组件</span>
              </template>
              <div class="import-component-container">
                <draggable
                    :list="state.importComponents"
                    :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
                    :clone="cloneComponent"
                    draggable=".draggable-item"
                    :sort="false"
                    @end="onEnd"
                  >
                    <template #item="{ element, index }">
                      <el-button class="draggable-item" size="default" plain @click="addComponent(element, index)">{{ element.label }}</el-button>
                    </template>
                </draggable>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="center-container">
            <el-card shadow="hover" class="layout-padding-auto">
              <template #header>
                <el-button-group class="layout-form-btn-group">
                  <el-button :icon="Download" plain>导出vue文件</el-button>
                  <el-button :icon="DocumentAdd" plain>保存</el-button>
                  <el-button :icon="Delete" plain>清空</el-button>
                </el-button-group>
              </template>
              <div class="center-form-content">
                <el-scrollbar>
                  <el-form>
                    <h1 style="text-align: center;">~ 开发中 ~</h1>
                  </el-form>
                </el-scrollbar>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="right-container">
            
          </div>
        </el-col>
    </el-row>
	</div>
</template>

<script setup lang="ts" name="wfFormDetail">
import { reactive, onMounted, ref, defineAsyncComponent, nextTick } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import _ from "lodash";
import draggable from "vuedraggable";
import {
  Delete,
  DocumentAdd,
  Download
} from '@element-plus/icons-vue'

import {
  inputComponents,
  selectComponents,
  layoutComponents,
  importComponents,
  formConf
} from "/@/utils/generator/config";

let tempActiveData: any;
const state = reactive({
  idGlobal: 100,
  formConf: Object.assign({}, formConf),
  inputComponents,
  selectComponents,
  layoutComponents,
  importComponents,
  labelWidth: 100,
  drawingList: {} as any,
  drawingData: {},
  activeId: 0,
  drawerVisible: false,
  formData: {},
  generateConf: null,
  activeData: {},
  fullscreenLoading: false
});

// 克隆组件
const cloneComponent = (origin: any) => {
    const clone = _.cloneDeep(origin);
    clone.formId = ++state.idGlobal;
    clone.span = formConf.span;
    clone.renderKey = +new Date(); // 改变renderKey后可以实现强制更新组件
    if (!clone.layout) clone.layout = "colFormItem";
    if (clone.layout === "colFormItem") {
      clone.fieldName = `field${state.idGlobal}`;
      clone.placeholder !== undefined && (clone.placeholder += clone.label);
      tempActiveData = clone;
    } else if (clone.layout === "rowFormItem") {
      delete clone.label;
      clone.componentName = `row${state.idGlobal}`;
      clone.gutter = state.formConf.gutter;
      tempActiveData = clone;
    }
    return tempActiveData;
}

// 拖动结束
const onEnd = (obj: any) => {
  if (obj.from !== obj.to) {
    state.activeData = tempActiveData;
    state.activeId = state.idGlobal;
  }
}

// 添加组件
const addComponent = (item: any, index: any) => {
  const clone = cloneComponent(item);
  state.drawingList.push(clone);
  activeFormItem(clone);
}

// 选中表单项
const activeFormItem = (element: any) => {
  state.activeData = element;
  state.activeId = element.formId;
}

// 复制项
const drawingItemCopy = (item: any, parent: any) => {
  let clone = _.cloneDeep(item);
  clone = createIdAndKey(clone);
  parent.push(clone);
  activeFormItem(clone);
}

// CreateIdAndKey
const createIdAndKey = (item: any) => {
  item.formId = state.idGlobal;
  item.renderKey = +new Date();
  if (item.layout === "colFormItem") {
    item.fieldName = `field${state.idGlobal}`;
  } else if (item.layout === "rowFormItem") {
    item.componentName = `row${state.idGlobal}`;
  }
  if (Array.isArray(item.children)) {
    item.children = item.children.map((childItem: any) =>
      createIdAndKey(childItem)
    );
  }
  return item;
}

// 删除项
const drawingItemDelete = (index: number, parent: any) => {
  parent.splice(index, 1);
  nextTick(() => {
    const len = state.drawingList.length;
    if (len) {
      activeFormItem(state.drawingList[len - 1]);
    }
  });
}

// 页面加载时
onMounted(() => {
  
});
</script>

<style scoped lang="scss">
.wf-form-detail-container {
  // border: 1px red solid;
  width: 100%;
  height: 100%;
}

.left-container {
  background-color: white;
  padding: 15px;
  max-height: 620px;
  overflow-y: auto;
}

.center-container {
  .layout-form-btn-group {
    width: 340px;
    float: right;
    position: relative;
    left: 15px;
  }
}

.right-container {
  background-color: white;
  padding: 15px;
  height: 620px;
  overflow-y: auto;
}

.draggable-item {
  width: 48%;
  cursor: move;
  margin: 2px;
  border: 1px #dcdfe6 dotted;
}
</style>